/*------------------------------------*\
    #PRIMARY NAVIGATION
\*------------------------------------*/

/**
 * Primary navigation existing in the header and maybe the footer
 */
.c-primary-nav {
   margin-left: auto;
}

/**
 * Primary navigation list
 */
.c-primary-nav__list {
   display: flex;
}

/**
 * Primary navigation item
 */
.c-primary-nav__item {
   margin-right: 1rem;
}

/**
 * Primary navigation link
 */
.c-primary-nav__link {
   display: block;
   padding: 0.5rem 0;
   transition: color 0.2s ease;

   &:hover {
      color: $color-white;
   }

   &:focus {
      color: $color-white;
      font-weight: bold;
   }
}
